<template>
  <div class="content-container">
    <h1>考核批次管理</h1>
    <!--统计批次列表列表-->
    <el-card>
      <div slot="header">
        <el-button type="primary" @click="addEditStatisticalBatchDialogVisible=true">新增</el-button>
      </div>
      <el-table :data="pageData.records" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="batchTitle" label="批次名称"></el-table-column>
        <el-table-column prop="templateName" label="模板名称"></el-table-column>
        <el-table-column prop="createUser" label="创建人"> </el-table-column>
        <el-table-column prop="createDate" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="updateStatisticalBatch(scope.row)">更新</el-button>
            <el-button type="text" @click="fillStatisticalInfo(scope.row)">填写</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageData.total"
          :page-size="pageConditon.size"
          :current-page="pageConditon.current"
        >
        </el-pagination>
      </div>
    </el-card>

    <!--新增/编辑统计批次弹出框-->
    <el-dialog title="新增/编辑" :visible.sync="addEditStatisticalBatchDialogVisible" :before-close="addEditStatisticalBatchDialogClose">
      <el-form :model="statisticalBatchForm">
        <el-form-item label="批次名称" label-width="100px">
          <el-input v-model="statisticalBatchForm.batchTitle"></el-input>
        </el-form-item>
        <el-form-item label="模板名称" label-width="100px">
          <!-- <el-input v-model="statisticalBatchForm.templateName"></el-input> -->
          <el-select v-model="statisticalBatchForm.templateId" placeholder="请选择模板" @change="selectTemplate">
            <el-option v-for="item in templateOptions" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addEditStatisticalBatchDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveStatisticalBatch">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageData: {},
      addEditStatisticalBatchDialogVisible: false,
      statisticalBatchForm: {
        id: 0,
        templateId: undefined,
        templateName: "",
        batchTitle: ""
      },
      templateOptions: [],
      pageConditon: {
        current: 1,
        size: 10,
        condition: {},
      }
    };
  },
  mounted() {
    this.requestTemplateList();
    this.requestStatisticalBatchPage();
  },
  methods: {
    // 更新模板按钮点击事件
    updateStatisticalBatch(batch) {
      console.log("update:batch:::", batch);
      this.statisticalBatchForm = {
        id: batch.id,
        templateId: batch.templateId,
        templateName: batch.templateName,
        batchTitle: batch.batchTitle
      };

      this.addEditStatisticalBatchDialogVisible = true;
    },

    // 保存模板
    saveStatisticalBatch() {
      this.$axios
        .post("/api/statistics/statistical-batch/save", this.statisticalBatchForm)
        .then((res) => {
          console.log("save:batch:::", res.data);
          if (res.data.code === 200) {
            this.$message.success(res.data.data);
            this.addEditStatisticalBatchDialogVisible = false;
            this.resetStatisticalBatchForm();
            this.requestStatisticalBatchPage();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => console.log(err));
    },

    // 查询列表
    requestStatisticalBatchPage() {
      this.$axios
        .post("/api/statistics/statistical-batch/page", this.pageConditon)
        .then((res) => {
          if (res.data.code === 200) {
            // console.log(res.data.data);
            this.pageData = res.data.data;
          }
        })
        .catch((err) => console.log(err));
    },

    // 重置form表单参数
    resetStatisticalBatchForm() {
      this.statisticalBatchForm = {
        id: 0,
        templateId: undefined,
        templateName: "",
        batchTitle: ""
      };
    },

    // 请求模板列表
    requestTemplateList() {
      this.$axios
        .get("/api/statistics/template/list")
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.templateOptions = res.data.data;
          }
        })
        .catch(err => console.log(err));
    },

    // 选择模板触发事件
    selectTemplate(templateId) {
      // console.log("item:::", templateId);
      let templateArr = this.templateOptions.filter(option => {
        return option.id === templateId;
      });
      this.statisticalBatchForm.templateName = templateArr[0].name;
      // console.log("statisticalBatchForm:::", this.statisticalBatchForm);
    },

    addEditStatisticalBatchDialogClose(done) {
      // console.log("close dialog......");
      this.resetStatisticalBatchForm();
      done();
    },

    fillStatisticalInfo(batch) {
      this.$router.push({
        path: '/fill-statistical-info',
        query: {
          batchId: batch.id,
          templateId: batch.templateId
        }
      })
    }

  }
}
</script>

<style>

</style>